<template>
  <div>
    <el-dialog
      v-model="visible"
      title="消息详情"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="closeDialog"
      width="618"
    >
      <el-form ref="formRef" :model="formData.form" style="margin-left: 14px" label-width="100px">
        <!-- 基础信息 -->
        <div>
          <div class="basic-information">基础信息</div>
          <el-form-item label="标题：" prop="title" style="max-width: 730px">
            <el-input disabled v-model="formData.form.title" />
          </el-form-item>
          <el-form-item label="消息类型：" prop="type" style="max-width: 730px">
            <el-input disabled v-model="formData.form.type" />
          </el-form-item>
          <el-form-item label="推送渠道：" prop="sendType">
            <el-checkbox-group v-model="formData.form.sendType" disabled>
              <el-checkbox label="短信" value="1" />
              <el-checkbox label="小程序" value="2" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="发送对象：" prop="userId">
            <el-input
              v-model="formData.form.userId"
              placeholder=""
              placement="bottom"
              style="max-width: 730px"
              disabled
            />
          </el-form-item>
          <el-form-item label="消息内容：" prop="content" style="max-width: 730px">
            <el-input disabled type="textarea" v-model="formData.form.content" />
          </el-form-item>
        </div>
        <!-- 系统信息 -->
        <div>
          <div class="basic-information">系统信息</div>
          <el-form-item label="创建人：" prop="creator" style="max-width: 730px">
            <el-input disabled v-model="formData.form.creator" />
          </el-form-item>
          <el-form-item label="创建时间：" prop="createTime" style="max-width: 730px">
            <el-input disabled v-model="formData.form.createTime" />
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import * as getMessageApi from '@/api/messageCenter/index'
import globalApi from '@/api/spb/global'
import { formatDate } from '@/utils/formatTime'
const message = useMessage()
let treeData = ref([])
const editId = ref()
const detailId = ref()
const peopleList = ref([])
const formData = reactive({
  form: {
    title: '',
    type: '',
    sendType: [],
    userId: [],
    content: '',
    creater: '',
    createTime: ''
  }
})
const formRef = ref() // 表单 Ref
const props = defineProps({
  visible: Boolean,
  editData: {
    type: Object
  }
})

/** 获取单人推送 */
const getpeopleList = () => {
  getMessageApi.getPeople().then((res) => {
    res.forEach((item) => {
      peopleList.value.push({
        label: item.residentName,
        value: String(item.id)
      })
    })
  })
}
const handleType = (v) => {
  let send = []
  v.map((item) => {
    if (item == 1) {
      item = '短信'
    } else {
      item = '小程序'
    }
    send.push(item)
  })
  return send
}
const getData = () => {
  getMessageApi.getMessageDetail(detailId.value).then((res) => {
    formData.form.title = res.messageCenterDO.title
    formData.form.content = res.messageCenterDO.content
    formData.form.creator = res.creator
    formData.form.createTime = formatDate(res.createTime, 'YYYY-MM-DD HH:mm ')
    formData.form.sendType = handleType(res.messageCenterDO.sendType)
    if (res.messageCenterDO.type == 1) {
      formData.form.type = '紧急警报'
    } else if (res.messageCenterDO.type == 2) {
      formData.form.type = '活动通知'
    } else {
      formData.form.type = '政策通知'
    }
    peopleList.value.forEach((item) => {
      if (String(item.value) == res.userId) {
        formData.form.userId = item.label
      }
    })
  })
}
const editVal = ref()
const emit = defineEmits(['update:visible', 'getedit'])
const visible = computed({
  get: () => {
    return props.visible
  },
  set: (val) => {
    emit('update:visible', val)
  }
})
watch(
  () => props.editData,
  (val) => {
    detailId.value = val.id
    if (detailId.value) {
      getData()
    }
  },
  { immediate: true }
)

/** 取消 */
const closeDialog = () => {
  visible.value = false
}
onMounted(() => {
  getpeopleList()
})
</script>
<style scoped>
.btnhover:hover {
  opacity: 0.8;
}
.basic-information {
  background-color: rgba(0, 117, 252, 0.1);
  color: rgba(0, 0, 0, 0.85);
  padding: 10px 20px;
  margin-bottom: 8px;
}
</style>
